import { App, DirectiveBinding, VNode } from "vue";
import useUserStore from "../../store/userStore";
// 处理元素disable状态
const handleEl = (el, binding: DirectiveBinding) => {
    const { prem } = useUserStore(); // 用户拥有的权限
    // 如果指令后面携带了参数show，v-auth:show="xxx"，就是隐藏元素
    if (binding.arg && binding.arg === 'show') {
        // @ts-ignore
        if (prem.indexOf(binding.value) < 0) {
            el.style.display = 'none';
        }
    } else {
        // 如果指令后面没携带参数，v-auth:show="xxx"，就是给元素设置为禁用状态
        // @ts-ignore
        if (prem.indexOf(binding.value) < 0) {
            el.disabled = true;
            el.classList.add('n-button--disabled')
        }
    }
}

// 控制按钮权限不可被点击
export default (app: App) => {
    app.directive('auth', {
        beforeMount(el, binding: DirectiveBinding, vnode: VNode) {
            handleEl(el,binding)
        },
        updated(el, binding: DirectiveBinding, vnode: VNode) {
            handleEl(el,binding)
        }
    })
}

